<template>
    <div class="fourimg">
        <div class="img-box">
            <div class="img-top">
                <div class="img-left">
                    <img src="../../assets/img-left.jpg" alt="">
                </div>
                <div class="img-right">
                    <div class="c-top">
                        <div class="c">
                            <h3>美容专家</h3>
                            <h2>刘东阳老师</h2>
                            <h4>知名医学美容专家</h4>
                        </div>
                    </div>
                    <p>传说中有了它才能嫁得好</p>
                </div>
            </div>
            <div class="img-bottom">
                <div v-for="(item,index) in imgList" :key="index">
                    <img :src="item.imgSrc" alt="">
                    <p>{{ item.title }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            imgList: [{
                imgSrc: require("../../assets/cb.jpg"),
                title: "FRONT COVER 摩登沉浸疗愈美妆体验"
            },{
                imgSrc: require("../../assets/cb2.jpg"),
                title: "橘朵携手敦煌博物馆发布瑞兽系列联名彩妆"
            },{
                imgSrc: require("../../assets/cb3.jpg"),
                title: "一瓶打造“素颜”男神 ——吾诺滋润修颜BB霜全新上市"
            },{
                imgSrc: require("../../assets/cb4.jpg"),
                title: "阿玛尼推出首款线上脸庞设计师美妆服务"
            },{
                imgSrc: require("../../assets/cb5.jpg"),
                title: "FARMACY法沫溪引领纯净美妆新趋势"
            },{
                imgSrc: require("../../assets/cb6.jpg"),
                title: "diptyque“无界之行”艺术展正式启程"
            }]
        }
    }
}
</script>
<style scoped>
    .fourimg {
        width: 100%;
        background: #F3F3F3;
    }
    .img-box {
        width: 1152px;
        margin: 0 auto;
        padding: 40px 0px;
        box-sizing: border-box;
    }
    .img-top {
        width: 100%;
        height: 395px;
    }
    .img-left {
        width: 66%;
        float: left;
        margin-right: 2%;
    }
    .img-left img {
        width: 100%;
    }
    .img-right {
        width: 32%;
        height: 392px;
        float: left;
        border-top: 3px solid pink;
        background: #f6ecf0;
    }
    .img-right .c-top {
        width: 100%;
        height: 294px;
        background: #dcdcdc;
        position: relative;
    }
    .c {
        position: absolute;
        top: 40%;
        left: 10%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: url("../../assets/pt_bg.png") no-repeat center;
    }
    .c h3 {
        font-weight: normal;
        margin-top: 48px;
    }
    .c h2 {
        margin-top: 20px;
    }
    .c h4 {
        font-weight: normal;
        color: #e5708c;
        margin-top: 10px;
    }
    .img-right p {
        font-size: 18px;
        line-height: 30px;
        margin-top: 20px;
    }
    .img-bottom {
        width: 100%;
        overflow: hidden;
        margin-top: 30px;
    }
    .img-bottom div {
        width: 32%;
        height: 395px;
        float: left;
        background: #fff;
        margin-right: 1%;
        margin-bottom: 20px;
        cursor: pointer;
    }
    .img-bottom div img {
        width: 100%;
        height: 300px;
    }
    .img-bottom div p {
        font-weight: bold;
        font-size: 18px;
        margin-top: 20px;
        padding: 0px 20px;
        box-sizing: border-box;
    }
    .img-bottom div p:hover {
        color: #f60;
    }
</style>